<template>
  <view class="login">
    <view class="flickering" :class="{ hidden: !flickering }"></view>

    <view class="logo">
      <image src="./images/logo-slogan.png" alt="" />
    </view>

    <view class="form">
      <uv-form labelPosition="left" :model="userInfo" ref="form">
        <uv-form-item
          class="custom-body"
          label="姓氏"
          prop="name"
          :class="{ error: validateField === 'name' }"
        >
          <uv-input v-model="userInfo.name" maxlength="2" border="none" placeholder="请输入姓氏" />
        </uv-form-item>
        <uv-form-item class="custom-sex" label="性别" prop="sex">
          <span :class="{ active: userInfo.sex == 0 }" @click="selectSex(0)">男</span>
          <span :class="{ active: userInfo.sex == 1 }" @click="selectSex(1)">女</span>
        </uv-form-item>
        <uv-form-item
          class="custom-body"
          label="生辰"
          prop="birthday"
          :class="{ error: validateField === 'birthday' }"
        >
          <uv-input
            v-model="userInfo.birthday"
            disabled=""
            placeholder="请选择生辰"
            border="none"
            @click="selectedBirthday"
          />
          <template v-slot:right>
            <uv-icon name="arrow-right"></uv-icon>
          </template>
        </uv-form-item>
        <uv-form-item
          class="custom-body"
          label="出生地区"
          prop="address"
          :class="{ error: validateField === 'address' }"
          @click="selectedAddress"
        >
          <uv-input v-model="userInfo.address" disabled="" placeholder="请选择地点" border="none" />
          <template v-slot:right>
            <uv-icon name="arrow-right"></uv-icon>
          </template>
        </uv-form-item>

        <view class="unfold" @click="toggleUnfold">
          <text v-if="!unfold">更多定制选填<uv-icon name="arrow-down"></uv-icon></text>
          <text v-else>折叠选填<uv-icon name="arrow-up"></uv-icon></text>
        </view>
        <template v-if="unfold">
          <uv-form-item class="custom-body" label="字数" prop="wordCountName">
            <uv-input
              v-model="userInfo.wordCountName"
              disabled=""
              placeholder="请选择字数"
              border="none"
              @click="selectedWordCount"
            />
            <template v-slot:right>
              <uv-icon name="arrow-right" style="display: inline-flex"></uv-icon>
            </template>
          </uv-form-item>
          <uv-form-item class="custom-body custom-body2" label="行辈用字" prop="seniorityName">
            <uv-input
              class="flex"
              v-model="userInfo.seniority1"
              placeholder="请输入"
              border="none"
            />
            <uv-input
              class="flex"
              v-model="userInfo.seniority2"
              placeholder="请输入"
              border="none"
            />
          </uv-form-item>
        </template>
        <div class="login-btn" @click="onSubmit">赐子嘉名</div>
      </uv-form>
    </view>

    <uv-datetime-picker
      ref="birthdayPickerRef"
      v-model="_birthdayValue"
      :showToolbar="false"
      mode="datetime"
      round="10"
      :formatter="formatter"
      :minDate="new Date(1970, 0, 1).getTime()"
      @confirm="confirm"
    >
      <template v-slot:head>
        <view class="tabs-container">
          <view class="tabs">
            <view
              class="tab-item"
              :class="{ active: userInfo.calendarType == 0 }"
              @click="userInfo.calendarType = 0"
              >公历</view
            >
            <view
              class="tab-item"
              :class="{ active: userInfo.calendarType == 1 }"
              @click="userInfo.calendarType = 1"
              >农历</view
            >
          </view>
        </view>
      </template>
    </uv-datetime-picker>
    <!-- //END 选择生成弹框 -->

    <SelectCity ref="addressRef" @confirm="confirmAddress">
      <template v-slot:head>
        <view class="tabs-container"></view>
      </template>
    </SelectCity>
    <!-- //END 选择出生城市 -->

    <SelectPopup
      ref="wordCountPopup"
      :columns="wordCountPopupOptions"
      @confirm="confirmWordCount"
    />
    <!-- //END 选择字数 -->

    <uv-popup ref="formValidateRef" class="formValidate">
      <view class="validate-bg">{{ validateText }}</view>
    </uv-popup>
    <!-- //END 表单验证提示 -->
  </view>
</template>

<script setup>
import { onMounted, ref } from 'vue';
import { formatTimestamp } from '@/utils/timeFormater.js';
import SelectCity from '../components/select-city/index.vue';
import SelectPopup from '../components/select-popup/index.vue';

const flickering = ref(false);
const form = ref(null);
const formValidateRef = ref(null);
const validateField = ref('');
const validateText = ref('');
const userInfo = ref({
  name: '',
  sex: 0,
  birthday: '',
  calendarType: 0, // 日历类型  0公历  1农历
  address: '',
  wordCount: '',
  wordCountName: '',
  seniority1: '',
  seniority2: '',
});
const unfold = ref(false);

// 选择性别
const selectSex = (type) => (userInfo.value.sex = type);

// 展开收起
const toggleUnfold = () => {
  unfold.value = !unfold.value;
  setTimeout(() => {
    uni.pageScrollTo({ scrollTop: unfold.value ? 80 : 0, duration: 300 });
  }, 0);
};

// 选择生辰
const birthdayPickerRef = ref(null);
const _birthdayValue = ref(null);
const formatter = (type, value) => {
  switch (type) {
    case 'year':
      return `${value}年`;
    case 'month':
      return `${value}月`;
    case 'day':
      return `${value}日`;
    case 'hour':
      return `${value}时`;
    case 'minute':
      return `${value}分`;
  }
  return value;
};
const selectedBirthday = () => birthdayPickerRef.value.open();
const confirm = ({ value }) => {
  userInfo.value.birthday = formatTimestamp(value);
};

// 选择出生地区
const addressRef = ref(null);
const _addressIndexs = ref('');
const selectedAddress = () => addressRef.value.open(_addressIndexs.value);
const confirmAddress = (params) => {
  const { indexs, value } = params;
  _addressIndexs.value = indexs;
  userInfo.value.address = `${value[0]['name']}/${value[1]['name']}/${value[2]['name']}`;
};

// 选择字数
const wordCountPopupOptions = ref([
  { value: 0, label: '双字名' },
  { value: 1, label: '单字名' },
]);
const wordCountPopup = ref(null);
const selectedWordCount = () => {
  wordCountPopup.value.open();
};
const confirmWordCount = (record) => {
  userInfo.value.wordCount = record.value;
  userInfo.value.wordCountName = record.label;
  console.log('changeWordCount', record);
};

// 提交表单
const onSubmit = () => {
  if (!userInfo.value.name) {
    validateText.value = '请填写姓氏';
    validateField.value = 'name';
    formValidateRef.value.open();
    return;
  }

  if (!userInfo.value.birthday) {
    validateText.value = '请选择生辰';
    validateField.value = 'birthday';
    formValidateRef.value.open();
    return;
  }

  if (!userInfo.value.address) {
    validateText.value = '请选择出生地区';
    validateField.value = 'address';
    formValidateRef.value.open();
    return;
  }

  console.log('提交表单', userInfo.value);
};

onMounted(() => {
  setTimeout(() => {
    flickering.value = false;
  }, 2000);
});
</script>

<style lang="less" scoped>
.login {
  width: 100%;
  background-image: url('images/bg.png');
  // background-size: cover;
  // background-position: center;
  background-repeat: no-repeat;
  padding-bottom: 85px;

  &::after {
    content: '';
    position: fixed;
    inset: 0;
    bottom: -85px;
    background-color: #f8f7eb;
    z-index: -1;
  }

  .flickering {
    position: fixed;
    inset: 0;
    background-image: url('images/flickering.png');
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    transition: all 2s;
    z-index: 2;

    &.hidden {
      opacity: 0;
      z-index: -1;
    }
  }

  .logo {
    width: 100%;
    display: flex;
    justify-content: center;
    padding-top: 20px;

    image {
      width: 278px;
      height: 108px;
    }
  }

  .form {
    margin: 15px 20px 0 15px;
    background: rgba(255, 255, 255, 0.85);
    border-radius: 12px;
    padding: 24px;

    .custom-body {
      ::v-deep {
        .uv-form-item__body__right {
          border: 1px solid #f2efec;
          background: #f2efec;
          border-radius: 6px;
          height: 48px;
          line-height: 48px;
          padding: 0 16px;
          font-size: 14px;
        }
      }

      &.error {
        ::v-deep {
          .uv-form-item__body__right {
            border: 1px solid #f00;
          }
        }
      }

      &.custom-body2 {
        ::v-deep {
          .uv-form-item__body__right {
            border: 1px solid #fff !important;
            background: transparent !important;
            border-radius: 6px;
            height: 48px;
            line-height: 48px;
            padding: 0;
            font-size: 14px;
          }
          .uv-form-item__body__right__content__slot {
            justify-content: space-between;
          }
          .uv-input {
            width: 48%;
            background: #f2efec;
            border-radius: 6px;
            height: 48px;
            line-height: 48px;
            font-size: 14px;
            flex: none;
            input {
              padding: 0 16px;
            }
          }
        }
      }
    }

    .custom-sex {
      ::v-deep {
        .uv-form-item__body__right__content__slot {
          display: flex;
          justify-content: space-between;
        }
      }

      span {
        width: 45%;
        text-align: center;
        height: 50px;
        line-height: 50px;
        font-size: 14px;
        border-radius: 6px;
        background: #f2efec;

        &.active {
          color: #fff;
          background: #6b483a;
        }
      }
    }

    .unfold {
      width: 100%;
      text-align: center;
      font-weight: 400;
      font-size: 12px;
      line-height: 20px;
      color: #636363;
      display: flex;
      justify-content: center;
      align-items: center;

      ::v-deep {
        .uv-icon--right {
          display: inline-flex;
          position: relative;
          top: 1px;
          margin-left: 5px;

          span {
            font-size: 12px;
            line-height: 12px;
          }
        }
      }
    }

    .login-btn {
      box-sizing: border-box;
      background: #6b483a url('images/btn-bg.png') no-repeat;
      background-size: 100% auto;
      font-weight: 400;
      font-size: 16px;
      line-height: 24px;
      color: #fff;
      height: 56px;
      line-height: 56px;
      text-align: center;
      border-radius: 12px;
      margin-top: 10px;
    }

    ::v-deep {
      .uv-input__content {
        background: #f2efec;
      }

      .uv-line {
        display: none;
      }
    }
  }
}

.formValidate {
  ::v-deep {
    .uv-popup__content {
      background-color: transparent !important;
    }
  }

  .validate-bg {
    background: url('images/validate-bg.png') no-repeat;
    background-size: 175px 58px;
    width: 175px;
    height: 58px;
    font-size: 16px;
    display: flex;
    justify-content: center;
    align-items: center;
    color: #c0422b;
  }
}

.tabs-container {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: row;
  padding-top: 24px;
  position: relative;

  &:before {
    content: '';
    width: 28px;
    height: 4px;
    border-radius: 4px;
    background-color: #d9d9d9;
    position: absolute;
    top: 8px;
    left: 50%;
    margin-left: -14px;
  }

  .tabs {
    background-color: #f2efec;
    width: 112px;
    display: inline-flex;
    border-radius: 6px;

    .tab-item {
      border-radius: 6px;
      width: 56px;
      height: 32px;
      display: flex;
      justify-content: center;
      align-items: center;
      font-family: 'PingFang SC';
      font-weight: 400;
      font-size: 12px;

      &.active {
        background: #6b483a;
        color: #fff;
      }
    }
  }
}
</style>
